<template>
	<view class="container" :style="{maxHeight: main_height+'px'}">
		<view class="filter-signal-item" v-bind:class="{ 
		 'filter-signal-item-active' : checked == item.value && mineChecked}" v-bind:key="item.value"
		 v-on:click="selectItem(item)" v-for="item in datalist">
			<text>{{ item.text }}</text>
			<i v-show="checked == item.value && mineChecked">
				<icon class='filter-signal-item-active' type="success_no_circle" size="16" color='#008BFF' /></i>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'filterList',
		props: {
			filterdata: {
				type: Object
			},
			height: {
				type: Number,
				default: 0.6
			},
			root: { //节点信息
				type: Object
			},
			selectData: {
				type: Boolean,
				default: false
			},
			mineChecked: {
				type: Boolean
			}
		},
		data() {
			return {
				datalist: [],
				selected: {
					value: ''
				},
				main_height: 500,
				checked: -1
			};
		},
		watch: {
			selectData(v) {
				if (!this.selectData) {
					// this.datalist = [];
					this.selected = {};
					this.checked = -1
				}
			},
			filterdata(){
				if (this.filterdata) {
					this.datalist = this.filterdata.data ? this.filterdata.data : [];
				}
			}
		},
		onLoad() {
			const res = uni.getSystemInfoSync();
			this.main_height = res.windowHeight * 0.6;
		},
		created() {
			if (this.filterdata) {
				this.datalist = this.filterdata.data ? this.filterdata.data : [];
			}
		},
		methods: {
			selectItem(item) {
				var returnData = {
					root: this.root,
					nodes: item,
					data: item
				};
				this.selected = item;
				this.checked = item.value;
				returnData = JSON.parse(JSON.stringify(returnData));
				this.$emit('select', returnData);
			}
		}
	};
</script>

<style scoped lang="less">
	.container {
		// height: 500upx;
		overflow-y: scroll;

		.filter-signal-item {
			background-color: white;
			color: #333;
			// margin: 0 3px;
			line-height: 92upx;
			overflow: hidden;
			-webkit-transition: background-color 0.1s linear;
			transition: background-color 0.1s linear;
			white-space: nowrap;
			text-overflow: ellipsis;
			margin: 0 30upx;
			display: flex;
			align-items: center;
			border-bottom: 0.5upx solid #F2F2F2;

			text {
				flex: 1;

			}
		}

		.filter-signal-item>i {
			float: right;
			margin-right: 15px;
		}

		.filter-signal-item-active {
			color: #2A7DFA;
			display: flex;
			align-items: center;

		}

		/* .filter-title-item-active {
			color: orangered;
		} */

		/* 以下为实现0.5px底部边界 */
		.filterLine {
			position: relative;
		}

		.filterLine:before,
		.filterLine:after {
			position: absolute;
			content: ' ';
			height: 1px;
			width: 100%;
			left: 0;
			transform-origin: 0 0;
			-webkit-transform-origin: 0 0;
		}

		/* .filterLine:before {顶部top:0;background:#000;}
		*/
		.filterLine:after {
			bottom: 0;
			border-bottom: 1px solid #C8C7CC;
		}

		@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {

			.filterLine:after,
			.filterLine:before {
				-webkit-transform: scaleY(0.667);
			}
		}

		@media only screen and (-webkit-min-device-pixel-ratio: 2) {

			.filterLine:after,
			.filterLine:before {
				-webkit-transform: scaleY(0.5);
			}
		}
	}

	/* 以上为实现0.5px底部边界 */
</style>
